<template>
  <div>
    <van-tabbar v-model="active" >  
      <van-tabbar-item name="home" icon="graphic">账户</van-tabbar-item>
      <van-tabbar-item name="search" icon="manager">管理</van-tabbar-item>
      <van-tabbar-item name="friends" icon="gold-coin">诚意金</van-tabbar-item>
    </van-tabbar>
    <div class="content">
      <!-- <div class="s-card" v-if="agent.roledec">
        <div class="s-card-text">{{ agent.roledec + "：" + agent.phone }}</div>
      </div> -->


      <div class="card1">
        <div class="flex">
          <div class="card1-title" style="flex:1">商户信息</div>
          <div class="btn4" @click="reset">退出登录</div>
        </div>

        <div class="flex">
          <div class="card1-text" style="flex:1;">商户名称：{{ agent.name }}</div>
          <div class="card1-text" style="width:50%;">店铺名称：<span style="color:#ffbe4c;">{{ store.name }}</span></div>
        </div>

        <div class="card1-text">手机号：{{ agent.phone }}</div>
        <div class="card1-text">注册时间：{{ agent.time }}</div>
        <div class="card1-text">类型：{{ agent.roledec }}</div>
        <div class="flex">
          <div class="card1-text" style="flex:1;">状态：{{ agent.statedec }}</div>
          <div class="card1-text" style="width:50%;">地址：<span style="color:#ffbe4c;">{{ store.address }}</span></div>
        </div>
      </div>
      <div class="sao" @click="getUrl">
        <van-loading style="color: #000;" v-if="loadings" size="24px"><span
            style="color: #000;">拉起扫码中...</span></van-loading>
        <span v-else> 扫码送券</span>
      </div>
      <div class="sao" style="margin-top:.3rem" @click="majiangMarket">
        麻将比赛
      </div>
      <div class="sao" v-if="agent.storeOpen == 1" style="margin-top:.3rem" @click="Supermarket">
        空中超市
      </div>
      
      <!-- 账户信息 -->
      <div class="card1" style="position:absolute;left:8%;bottom:1.8rem" v-show="active == 'home'">
        <div class="card1-title">账户信息</div>
        <div class="flex">
          <div class="card1-text1" style="flex:1">代金券余额：<span v-if="agent.voucher" style="color: red;">{{ agent.voucher +
            "元" }}</span></div>
          <!--  <div class="btn5">余额报警</div> -->
          <div class="btn2" @click="isSureShow = true">
            充值须知
          </div>
        </div>
        <!-- <div class="btn"> -->
          <div class="btn1s" @click="btn2">代金券发放记录</div>
          <div class="btn21" @click="payFn">代金券充值</div>
        <!-- </div> -->
      </div>
      <!-- 商户管理 -->
      <div class="card1" style="margin-top: .4rem;" v-show="active == 'search'">
        <div class="card1-title">商户管理</div>
        <div class="flex">
          <div class="card1-text" style="flex: 1;">我的上级：</div>
          <div class="card1-text"><span style="color:#ffbe4c;">{{ superior }}</span> </div>
        </div>
        <div class="flex">
          <div class="card1-text" style="flex: 1;">我的会员数：</div>
          <div class="card1-text"><span style="color:#ffbe4c;">{{ superNumber + '人' }}</span> </div>
        </div>
        <div class="flex">
          <div class="card1-text" style="flex: 1;">我的用户数：</div>
          <div class="card1-text"><span style="color:#ffbe4c;">{{ userNumber + '人' }}</span> </div>
        </div>
     <!--    <div class="flex1" style="margin-top: .2rem;">
         
        </div> -->
        <div class="btn6" @click="jumpCode">送券码</div>
          <div class="btn6" @click="btn3" v-if="staff == 2">授权助理</div>
          <div class="btn6" @click="jumpSuer">邀请新用户</div>
      </div>
      <!-- 诚意金 -->
      <div class="card1" style="position:absolute;left:8%;bottom:1.8rem" v-show="active == 'friends'">

        <div class="flex" style="width:90%;margin-left: .1rem;margin-bottom: .2rem;">
          <div class="card1-title"   style="flex: 1;">诚意金</div>
         
         
        </div>
        <div class="btn2s" style="font-size: .3rem;" @click="moneyShow = true">
            了解诚意金
          </div>
        <div class="btn2s" style="margin-left:.1rem;background-color: #7efed3;style=font-size: .3rem;float: right;" @click="moneyShowFn">
            缴纳诚意金
          </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <van-dialog v-model="isSureShow" title="" :show-cancel-button="false" :showConfirmButton="false" width="70%">
      <div class="dloTitle"> 充值须知</div>
      <div class="dloTtxt">
        1:请仔细阅读合作协议，协议内含计费标准。
      </div>
      <div class="dloTtxt">
        2:一旦同意，即视为同意合作条件。
      </div>
      <div class="dloTtxt">
        3:已交纳企叮咚加盟费的店长，凭企叮咚收款收据，享A/B套餐优惠待遇。
      </div>
      <div class="dloTtxt">
        4:其他店长请按套餐c充值
      </div>
      <div class="dloBtn" @click="NoticeFn">返回</div>
    </van-dialog>
    <!-- 诚意金弹窗 -->
    <van-dialog v-model="moneyShow" title="" :show-cancel-button="false" :showConfirmButton="false" width="70%">
      <div class="dloTitle"> 了解诚意金</div>
      <div class="dloTtxt">
        1:为了杜绝无诚意的合作，特此设立诚意金。
      </div>
      <div class="dloTtxt">
        2:诚意金1万元，且不得在合作中途退出。该诚意金本金，可在合作期满+1天退还店长。
      </div>
      <div class="dloTtxt">
        3:<span style="color: red"> 不交诚意金的店长，不能扫码送券。</span> 30天后，将被视为自动放弃，将被系统清零。
      </div>
      <div class="dloBtn" @click="moneyShow = false">返回</div>
    </van-dialog>
  </div>
</template>

<script>
import { indexdata, scandata, getUrlLink, login } from "@/api/fulfil.js";
export default {
  name: 'index',
  data() {
    return {
      agent: {},
      store: {},
      ticket: {},
      loadings: false,
      staff: '',
      active: 'home',
      isSureShow: false,//充值须知
      moneyShow: false,
      superNumber: '',//我的会员数
      superior: '',//我的上级
      userNumber: '',//用户数
      isSincerity:'',//是否缴纳了诚意金
    };
  },
  created() {

  },
  mounted() {

  },
  activated() {
    //静默登录
    let openid =  localStorage.getItem('openid');
    if(!openid && openid == null){
      this.acquireCode();
    }
    this.staff = localStorage.getItem("staff");
    let uid = localStorage.getItem("agentid");
    console.log(uid, "uid");
    if (!uid) {
      this.$Toast("请先登录！");
      this.$router.push({
        path: "/login",
      });
    } else {
      this.getIndex();
    }
  },
  methods: {
    //充值须知
    NoticeFn(){
      this.isSureShow = false;
      localStorage.setItem('Notice',1);
    },
    reset() {
      localStorage.removeItem("adminid");
      localStorage.removeItem("agentid");
      localStorage.removeItem("phone");
      localStorage.removeItem("password");
      localStorage.removeItem("role");
      localStorage.removeItem("staff");
      localStorage.removeItem("openid");
      localStorage.removeItem("Notice");
      this.$router.push({
        path: "/login",
      });
    },
    //静默登录
    acquireCode() {
      const code = this.getUrlParam("code"); // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
      const local = window.location.href;
      if (code == null || code === "") {
        window.location.href =
          "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd7fdd57dae07f2f3" +
          "&redirect_uri=" +
          encodeURIComponent(local) +
          "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
      } else {
        console.log(code, 'code');
        this.logins(code); //把code传给后台获取用户信息
      }
    },
    logins(code) {
      login({
        phone: '',
        pwd: '',
        agentid: localStorage.getItem('agentid'),
        code: code,
      })
        .then((res) => {
          console.log(res, 'resopenid');
          localStorage.setItem('openid', res.data.data.agent.openid);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //空中超市
    Supermarket() {
    /*   this.$Toast('开发中，敬请期待'); */
    this.$router.push({
        path: "/storeList",
      });
    },
    majiangMarket(){
      this.$router.push({
        path: "/Tournament",
      });
    },
    getIndex() {
      indexdata({
        agentid: localStorage.getItem("agentid"),
        role: localStorage.getItem("role")
      })
        .then((res) => {
          this.agent = res.data.data.agent;
          this.store = res.data.data.store;
          this.superior = res.data.data.superior;
          this.superNumber = res.data.data.superNumber;
          this.userNumber = res.data.data.userNumber;
          this.isSincerity = res.data.data.agent.isSincerity;
          this.voucher =  res.data.data.agent.voucher;//代金券余额
          if( Number(res.data.data.agent.voucher) < 1000){
            this.$Toast('您的充值账号余额不足1000元代金券，请及时充值！'); 
          }
          localStorage.setItem("voucherNumber", res.data.data.agent.voucher);
          localStorage.setItem("stores", res.data.data.store.id);
          console.log(res.data.data.store.id, 'stores');
        })
        .catch((error) => {
          console.log(error);
        });
    },


    // 获取用户id
    getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    btn1() {
      this.$router.push({
        path: "/record1",
      });
    },
    btn2() {
      this.$router.push({
        path: "/record2",
      });
    },
    //跳转支付
    payFn() {
      let Notice  =  localStorage.getItem('Notice');
      localStorage.setItem('paytype',1); //1充值代金券  2充诚意金
      if(!Notice){
        this.$Toast("请先查看充值须知");
      }else{
        this.$router.push({
        path: "/pay",
      });
      }
    },
    //缴纳诚意金
    moneyShowFn(){
      if(this.isSincerity == 1){
        this.$Toast("您已缴纳诚意金，请勿重复缴纳！");
        return false;
      }
      localStorage.setItem('paytype',2); //1充值代金券  2充诚意金
      this.$router.push({
        path: "/pay",
      });
    },
    //助理管理
    btn3() {
      this.$router.push({
        path: "/assistant",
      });
    },
    //领券审核
    jumpCode() {
      this.$router.push({
        path: "/audit",
      });
    },
    jumpSuer() {
      getUrlLink({
        agentid: localStorage.getItem("agentid"),
      })
        .then((res) => {
          console.log(res, 'res');
          if (res.data.code == 0) {
            this.$router.push({
              path: "/qrcode1", query: {
                qrcode: res.data.data
              }
            });
          }
        })
        .catch((error) => {
          console.log(error);
        });


    },
    getUrl() {
      if(this.isSincerity != 1){
        this.$Toast("请先缴纳诚意金");
        return false;
      }
      this.loadings = true;
      let that = this;
      let wechaturl = window.location.href;
      scandata({
        agentid: localStorage.getItem("agentid"),
        url: wechaturl,
      }).then((res) => {
        if (res.data.code == 0) {
          that.ticket = res.data.data;
          console.log(wx);
          wx.config({
            // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出
            debug: false,
            appId: that.ticket.appId, // 必填，公众号的唯一标识
            timestamp: that.ticket.timestamp, // 必填，生成签名的时间戳
            nonceStr: that.ticket.noncestr, // 必填，生成签名的随机串
            signature: that.ticket.signature, // 必填，签名
            jsApiList: ["getLocation", "openLocation", "scanQRCode"], // 必填，需要使用的JS接口列表
            openTagList: ["getLocation", "openLocation", "scanQRCode"], // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
          });
          wx.ready(() => {
            wx.scanQRCode({
              needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
              scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
              success: function (res) {
                console.log(res, 'res1');
                window.location.href = res.resultStr;
                /*  this.$Toast("扫描成功！"); */
              },
              fail: (err) => {
                this.$Toast(err);
                console.log(err, 'err');
              },
            });
          });
        } else {
          this.$Toast(res.data.msg);
        }

        this.loadings = false;
        console.log("res11111", res);

      });
    },
  },
};
</script>

<style scoped>
.content {
  padding-bottom:1rem ;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background: #e1f7fc;
}

.card1 {
  overflow: hidden;
  margin: 0.3rem auto 0;
  padding: 0.25rem 0.5rem;
  width: 80%;
  background: #fff;
  border-radius: 0.375rem;
  box-sizing: border-box;
}

.van-dialog {
  padding: 0 .5rem;
  box-sizing: border-box;
}

.dloTitle {
  text-align: center;
  font-size: .4rem;
  font-weight: 600;
  margin-top: .4rem;
}

.dloTtxt {
  margin-top: .2rem;
  font-size: .35rem;
}

.dloBtn {
  width: 50%;
  height: .8rem;
  background: red;
  color: #fff;
  border-radius: .5rem;
  text-align: center;
  line-height: .8rem;
  margin: .5rem auto;
}

::v-deep .van-tabbar-item__icon {
  font-size: .55rem;
}

::v-deep .van-tabbar-item__text {
  font-size: .32rem;
}

.flex {
  display: flex;
}

.flex1 {
  display: flex;
  justify-content: space-between;
}

.s-card {}

.card1-title {
  margin: .1rem 0 0 .2rem;
  font-size: 0.4125rem;
  font-weight: 600;
  color: #000;
}

.card1-text {
  margin: 0.25rem 0 0 0.2rem;
  font-size: 0.3125rem;
  font-weight: 600;
  color: #000;
}

.card1-text1 {
  margin: 0.25rem 0 0 0.2rem;
  font-size: 0.3125rem;
  font-weight: 600;
  color: #000;
}

.btn {
  margin-top: 0.2rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.btn1 {
  padding: 0 .2rem;
  display: inline-block;
  width: 2.4rem;
  height: 0.75rem;
  color: #000;
  text-align: center;
  line-height: 0.75rem;
  border-radius: 0.375rem;
  background-color: #3cc9e8;
}
.btn1s {
  margin: .2rem auto 0;
  width: 80%;
  height: 1rem;
  color: #000;
  text-align: center;
  line-height: 1rem;
  border-radius: 0.5rem;
  background-color: #3cc9e8;
}
.btn2 {
  display: inline-block;
  padding: 0 .3rem;
  height: 01rem;
  width: 35%;
  line-height: 1rem;
  text-align: center;
  color: #000;
  border-radius: .5rem;
  background-color: #ffbe4c;
}

.btn21 {
  margin: .2rem auto 0;
  height: 1rem;
  line-height: 1rem;
  width: 80%;
  text-align: center;
  color: #000;
  border-radius: .5rem;
  background-color: #ffbe4c;
}
.btn2s {
  min-width: 45%;
  display: inline-block;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  color: #000;
  border-radius: 0.5rem;
  background-color: #ffbe4c;
}

.btn5 {
  margin-right: .2rem;
  display: inline-block;
  padding: 0 .1rem;
  height: 0.75rem;
  line-height: 0.75rem;
  text-align: center;
  color: #000;
  border-radius: 0.375rem;
  background-color: skyblue;
}

.btn6 {
  margin: .2rem auto 0;
  width: 60%;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  color: #000;
  border-radius: 0.5rem;
  background-color: #7efed3;
}

.btn3 {
  display: inline-block;
  padding: 0 .4rem;
  height: 0.75rem;
  line-height: 0.75rem;
  text-align: center;
  color: #000;
  border-radius: 0.375rem;
  background-color: #7FFFD4;
}

.sao {
  margin: 1rem auto 0;
  width: 60%;
  text-align: center;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.4rem;
  border-radius: 0.2rem;
  background-color: #ffbe4c;
  font-weight: 600;
}

.saos {
  margin: 2rem auto 0;
  width: 60%;
  text-align: center;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.35rem;
  border-radius: 0.5rem;
  background-color: #7FFFD4;
  font-weight: 600;
}

.saosuer {
  margin: 2rem auto 0;
  width: 60%;
  text-align: center;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.35rem;
  border-radius: 0.5rem;
  background-color: #3cc9e8;
  font-weight: 600;
}

.btn4 {
  margin: 0;
  float: right;
  width: 2rem;
  height: 0.75rem;
  color: #000;
  text-align: center;
  line-height: 0.75rem;
  border-radius: 0.375rem;
  background-color: #ffaa7f;
}

.s-card-text {
  margin: 20px 30px 20px 20px;
  height: 0.75rem;
  line-height: 0.75rem;
  float: left;
  color: #000;
  font-size: 0.45rem;
  font-weight: 600;
}
</style>